<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.min.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 复用组件 -->
			<div>
				<hello></hello>
				<hi></hi>
			</div>
			<div>
				<hello></hello>
				<hi></hi>
			</div>
			
		</div>
		
		<script type="text/javascript">
			const hello = Vue.extend({
				template:`
					<h1>{{msg}}</h1>
				`,
				data() {
					return {
						msg: 'Hello,World'
					}
				}
			})
			
			const hi = Vue.extend({
				template:`
					<h2>{{msg}}</h2>
				`,
				data() {
					return {
						msg: 'Hi,World'
					}
				}
			})
			
			// hello 与 hi 本质是一个构造函数
			console.log(typeof hello) // function
			console.log(typeof hi) // function
			
			// hello 对象与 hi 对象不相同
			console.log(hello === hi) // false
			
			// 注册全局组件
			Vue.component('hello',hello)
			Vue.component('hi',hi)
			
			const vm = new Vue({
				el: '#root'
			})
			
			console.log('@',hello.prototype.__proto__)
			console.log('#',Vue.prototype)
			console.log(hello.prototype.__proto__ === Vue.prototype) // true
			
			
			
			
		</script>
	</body>
</html>